$(function(){
    var table = $(".content");
    var url = "http://localhost:3000/users";
    var userOp = new UserOpetator();
    $("button:first").on("click",function(e){
        userOp.loadUser(url,parseData);
    });
    
    function addDelEvent(){
        $("button").not("[class=btn1]").on("click",function(e){
            userOp.deleteUser(url,this.id);
            userOp.loadUser(url,parseData);
        });
    }
    
    //解析数据并渲染
    function parseData(data){
        console.log(data.length);
        if(!data.length){
            return;
        }
        table.empty();
        data.forEach((item,index)=>{
            var tr = $("<tr></tr>");
            var tdId = $("<td></td>");
            var tdName = $("<td></td>");
            var tdAge = $("<td></td>");
            var tdBtn = $("<td></td>");
            var btn=$("<button></button>");
            tdId.text(item.id);
            tdName.text(item.name);
            tdAge.text(item.age);
            btn.text("del");
            btn.get(0).id=item.id;
            tdBtn.append(btn);
            tr.append(tdId).append(tdName).append(tdAge).append(tdBtn);
            table.append(tr);
        });
        addDelEvent();
    }
});

function UserOpetator(){
    this.loadUser=function(url,fn){
        $.ajax({
            type:"GET",
            url:url,
            dataType:"json"
        }).done(function(msg){
            fn(msg);
        });
    },
    this.deleteUser=function(url,id){
        $.ajax({
            type:"DELETE",
            url:url+"/"+id,
            dataType:"json"
        }).done(function(){
            console.log("delete success");
        });
    }
}